<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
		  content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>支付宝通道申请</title>

	<link rel="stylesheet" href="../../../../bangnuo/css/operation/add_merchants_new.css">

	<script src="../../../../bangnuo/vue/vue.js"></script>
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
	<!-- 引入组件库 -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="../../../../bangnuo/bootstrap/js/jquery-3.4.1.js"></script>
	<script src="../../../../bangnuo/vue/axios.min.js"></script>
	<style>
		.main-body {
			width: 80%;
			margin: 0 auto;
		}

		.el-input-class {
			width: 221px;
			margin: 10px 10px;
		}

		.table-main-class {

		}

		.avatar-uploader-icon {
			font-size: 28px;
			color: #8c939d;
			width: 178px;
			height: 178px;
			line-height: 178px;
			text-align: center;
		}

		.avatar {
			width: 178px;
			height: 178px;
			display: block;
		}
	</style>
	<script type="module" src="../../operation/js/config/public.js"></script>
</head>
<body>
<div id="app">
	<div class="main-body">
		<div class="input-header">
			商户编号：&nbsp;&nbsp;&nbsp;
			<el-input v-model="form.number" placeholder="请输入商户编号" class="el-input-class"></el-input>
			<br/>
			公司名称：&nbsp;&nbsp;&nbsp;
			<el-input v-model="form.companyName" placeholder="请输入公司名称" class="el-input-class"></el-input>
			<br/>
			<!--审核状态：&nbsp;&nbsp;&nbsp;
			<el-input v-model="form.status" placeholder="请输入公司名称" class="el-input-class"></el-input>
			<br/>-->

			支付宝账号：&nbsp;&nbsp;
			<el-input v-model="form.aliPayNumber" placeholder="请输入支付宝账号" class="el-input-class"></el-input>
			<br/>
			营业执照注册号：
			<el-input v-model="form.businessNumber" placeholder="请输入营业执照注册号" class="el-input-class"></el-input>
			<br/>
			营业执照照片&nbsp;：
			<el-upload
					class="avatar-uploader"
					action="/upload/image/businessLicense"
					name="imgFile"
					:show-file-list="false"
					:on-success="handleAvatarSuccess1"
					:before-upload="beforeAvatarUpload">
				<!--用于上传图片预览-->
				<img v-if="imageUrl1" :src="imageUrl1" class="avatar">
				<!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<br/>
			资质许可证照片(选填)：
			<el-upload
					class="avatar-uploader"
					action="/upload/image/qualificationLicense"
					name="imgFile"
					:show-file-list="false"
					:on-success="handleAvatarSuccess2"
					:before-upload="beforeAvatarUpload">
				<!--用于上传图片预览-->
				<img v-if="imageUrl2" :src="imageUrl2" class="avatar">
				<!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
			<br/>
			店铺招牌照片&nbsp;：
			<!--
            el—upload：上传组件
            action：上传的提交地址，当点击图片上传，选中好图片，点击上传时，就会发出请求action，
            auto-upload：选中文件后是否自动上传
            name：上传文件的名称，服务端可以根据名称获得上传文件的对象
            show-file-list：是否显示已上传文件列表
            on-success：文件上传成功时的钩子
            before-upload：上传文件之前的钩子
            -->
			<el-upload
					class="avatar-uploader"
					action="/upload/image/shopPhotos"
					name="imgFile"
					:show-file-list="false"
					:on-success="handleAvatarSuccess3"
					:before-upload="beforeAvatarUpload">
				<!--用于上传图片预览-->
				<img v-if="imageUrl3" :src="imageUrl3" class="avatar">
				<!--用于展示上传图标，当imageUrl为null时，就展示空白，当imageUrl有了值，就会展示指向该地址的图片-->
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>

			<br/>
			联系人姓名：&nbsp;&nbsp;
			<el-input v-model="form.adminName" placeholder="请输入姓名" class="el-input-class"></el-input>
			<br/>
			联系人手机号：&nbsp;
			<el-input v-model="form.adminPhone" placeholder="请输入手机号" class="el-input-class"></el-input>
			<br/>
			联系人邮箱：&nbsp;&nbsp;
			<el-input v-model="form.adminEmail" placeholder="请输入邮箱" class="el-input-class"></el-input>
			<br/>
			申请费率：&nbsp;&nbsp;&nbsp;
			<el-input v-model="form.rate" placeholder="请输入申请费率" class="el-input-class"></el-input>
			<br/>

			<el-button type="primary" @click="onSubmit">提交</el-button>
		</div>
	</div>

</div>
<script type="module">
    import bnApi from '../../operation/js/config/public.js';

    var vue = new Vue({
        el: '#app',
        data: {
            form: {
                rate: "",//汇率
                adminEmail: "",
                adminPhone: "",
                adminName: "",
                number: "",
                companyName: "",
                status: "",
                aliPayNumber: "",
                businessNumber: "",
                imageUrl1: "",
                imageUrl2: "",
                imageUrl3: "",
                type: "1",//微信，
                commercialId: ""

            },
            imageUrl1: "",
            imageUrl2: "",
            imageUrl3: "",
            input: ''
        },
        methods: {
            onSubmit() {
                bnApi.requestPost("/commercial/channel", this.form).then(res => {
                    if (res.success) {
                        this.$message.success("申请成功待审核");
                    } else {
                        this.$message.error("申请失败");
                    }
                });
            },

            handleAvatarSuccess1(response, file) {
                //给模型数据赋值，进行图片的预览
                alert(response)
                this.imageUrl1 = response.object.path;
                this.form.imageUrl1 = response.object.path;
                //this.imageUrl = "D:\\IdeaProject\\demo\\springcloud\\springcloudDemo\\pic-upload\\src\\main\\resources\\static\\img\\" + response.data;

                if (response.data.success) {
                    this.$message.success("上传成功")
                } else {
                    this.$message.error("上传失败")
                }
                //设置数据模型赋值（文件名字），是为了在提交表单时，发送ajax请求，要把图片的名称会提交到后台，然后保存到数据库（保存的也只是图片的名字）
            },
            handleAvatarSuccess2(response, file) {
                //给模型数据赋值，进行图片的预览
                alert(response)
                this.imageUrl2 = response.object.path;
                this.form.imageUrl2 = response.object.path;
                //this.imageUrl = "D:\\IdeaProject\\demo\\springcloud\\springcloudDemo\\pic-upload\\src\\main\\resources\\static\\img\\" + response.data;

                if (response.data.success) {
                    this.$message.success("上传成功")
                } else {
                    this.$message.error("上传失败")
                }
                //设置数据模型赋值（文件名字），是为了在提交表单时，发送ajax请求，要把图片的名称会提交到后台，然后保存到数据库（保存的也只是图片的名字）
            }, handleAvatarSuccess3(response, file) {
                //给模型数据赋值，进行图片的预览
                alert(response)
                this.imageUrl3 = response.object.path;
                this.form.imageUrl3 = response.object.path;
                //this.imageUrl = "D:\\IdeaProject\\demo\\springcloud\\springcloudDemo\\pic-upload\\src\\main\\resources\\static\\img\\" + response.data;

                if (response.data.success) {
                    this.$message.success("上传成功")
                } else {
                    this.$message.error("上传失败")
                }
                //设置数据模型赋值（文件名字），是为了在提交表单时，发送ajax请求，要把图片的名称会提交到后台，然后保存到数据库（保存的也只是图片的名字）
                this.formData.img = response.data;
            },
            //上传图片之前执行,只是对选中的图片的后缀名进行校验
            //file就是上传的文件
            beforeAvatarUpload(file) {
                // 可以在tomcat的conf的web.xml中找到相对应的文件类型
                var isJPG = file.type === 'image/jpeg' || "image/gif" || "image/png";

                var isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG或者gif或者png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 50kb!');
                }
                return isJPG && isLt2M;
                return isLt2M;
            },
            getQueryVariable:function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if(pair[0] == variable){return pair[1];}
                }
                return(false);
            },
            queryById: function () {
                bnApi.requestPost("/commercial/findByIdAndType/" + this.form.commercialId).then(res => {
                    if (res.success) {
                        for (let i = 0; i <res.queryResult.list.size(); i++) {
                            if (res.queryResult.list(i).type==1){
                                this.form=res.queryResult.list(i);
                            }
                        }
                    }
                });
            }
        },
        mounted() {
            this.form.commercialId = this.getQueryVariable("id");
            this.queryById();
        }
    })
</script>
</body>


</html>